<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            .wrap {
                width: 900px;
                display: flex;
                border: 5px solid blue;
                padding: 10px;
                flex-wrap: wrap;
                justify-content: center;
                margin: auto;
            }

            .wrap>div, .wrap .flower {
                width: calc(100% / 6 - 30px);
                height: 100px;
                border: 2px solid black;
                margin: 5px;
            }

            .wrap>div {
                padding: 2px;
                background: yellow;
            }

            #box {
                width: 200px;
                height: 200px;
                background: red;
            }

        </style>
    </head>
    <body>

        <div class="wrap">
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>

        </div> 

        <div id="box"></div>    
        <p class="hello">hello</p>  

        <ul>
            <li>22</li>
            <p>hello, world</p>
            <li>22</li>
            <p>hello, world</p>
            <li>22</li>
            <p>hello, world</p>
            <li>22</li>
            <p>hello, world</p>
            <li>22</li>
            <p>hello, world</p>
        </ul> 
    </body>
</html>
<script src="jquery.min.js"></script>
<script>
    
    // $('.flower').append('<h3>标题</h3>');
    // var arr = ['月季', '玫瑰', '百合', '牡丹', '康乃馨', '紫罗兰', '菊花', '喇叭花', '牵牛花', '荷花', '樱花', '梅花'];
    // $('.flower').append(function(index, html) {
    //     var h3 = $('<h3 />').append(arr[index]);
    //     return h3;
    // });

     // $('<h3 />').append('<h3>标题</h3>').appendTo('.flower');
     // $('p').appendTo('.flower');

     // $(".flower").append($('p')).append('<h3>标题</h3>');

     // $(".flower").append($('p')).prepend('<h3>标题</h3>');


     // $('li+p').prependTo('li');

     // $('li').prepend(function() {
     //    return $(this).next();
     // });

     // $('ul').after($('.wrap'));
     // $('.wrap').insertAfter('ul');

     var div = $('<div />').css({
        width: 300,
        height: 500,
        border: "5px solid blue"
     });
     // $('ul, .hello').wrap(div);

     // setTimeout(function() {
     //    $('ul').unwrap();
     // }, 3000);
     // $('ul, .hello').wrapAll(div);

    // $('.hello').wrapInner("<span></span>");
    // $('.hello').wrapInner($('<span />').css('color', 'red'));

    // $('.hello, ul').replaceWith('<div>222</div>');
    // $('<div>222</div>').replaceAll('ul, .hello');
    // $('ul').empty();

    // var p = $('p').remove('.hello');

    // $('.wrap').after(p);

    $('#box').append($('.hello').clone());



</script>